import React, { Component } from "react"
import MyNavLink from "./MyNavLink"
import { Outlet } from "react-router-dom"

export default class Home extends Component {
  showAbout = () => {
    this.props.history.replace(`./message`)
  }
  render() {
    return (
      <>
        <div>Home</div>
        <div onClick={this.showAbout}>About</div>
        <MyNavLink to="news">news</MyNavLink>
        <MyNavLink to="message" state={{ id: 10110 }}>
          message
         </MyNavLink>
        {/* state 传参 */}

        {/* <MyNavLink to="message?id=9087">message</MyNavLink> */}
        {/* search 传参 */}

        {/* <MyNavLink to="message/9087">message</MyNavLink> */}
        {/* params 传参 */}

        <Outlet></Outlet>
        {/* Outlet 指定路由组件呈现位置 */}

        {/* <Routes>
          <Route path="/news" element={<News />}></Route>
          <Route path="/message" element={<Message />}></Route>
          <Route path="/" element={<Navigate to="/home/message" />}></Route>
        </Routes> */}
      </>
    )
  }
}
